<template>
  <div class="sidebar">
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
      class="blue lighten-2"
    >
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-icon large color="white">mdi-account-circle</v-icon>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title class="text-h6" style="color: white">
           User Name
          </v-list-item-title>
        </v-list-item-content>
        <v-btn icon @click.stop="mini = !mini" color="white">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>

      <v-divider color="white"></v-divider>

      <v-list>
        <v-list-item link @click="toRegister">
          <v-list-item-icon>
            <v-icon color="white">mdi-key-change</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title style="color: white">
              Change Password
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item link @click="toLogin">
          <v-list-item-icon>
            <v-icon color="white">mdi-logout-variant</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title style="color: white">Logout</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

      </v-list>
      <template v-slot:append>
        <div class="pa-2">
          <v-btn block>
            Logout
          </v-btn>
        </div>
      </template>
    </v-navigation-drawer>
  </div>
</template>
<script>
export default {
  name: "Sidebar",
  data() {
    return {
      drawer: true,
      mini: false,
    };
  },
  methods:{
     toRegister(){
      this.$router.push("/register");
    },
    toLogin() {
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped>
</style>